/*自定义，整站通用js*/


//主导航下拉菜单
$(function(){
	$(".sljf_headerNavMenu .f_navSwitch").toggle(
		function(){
			$(".sljf_headerNavMenu .f_menu").slideDown();
		},
		function(){
			$(".sljf_headerNavMenu .f_menu").slideUp()
		}
	);
});



/**
*组件名称：通用下拉菜单
*
*使用说明：
*1.鼠标点击引发下拉菜单Class=sljJS_dropDownMenuClick,鼠标移上触发下拉菜单sljJS_dropDownHover
*2.下拉菜单的控制按钮加上Class=JS_dropToggle,
*3.下拉菜单的下拉部分Class=JS_dropMenu,
*注意：本组件只负责显示与隐藏，不参与具体样式的控制
代码演试：
	<div class="sljJS_dropDownMenuClick">
		<div class="JS_dropToggle">点击按钮</div>
		<div class="JS_dropMenu">下拉菜单</div>
	</div>
**/
/*鼠标点击触发下拉菜单 sljJS_dropDownMenuClick*/
$(function(){
	$(".sljJS_dropDownMenuClick .JS_dropToggle").toggle(
		function(){
			$(this).closest(".sljJS_dropDownMenuClick").find(".JS_dropMenu").slideDown();
		},
		function(){
			$(this).closest(".sljJS_dropDownMenuClick").find(".JS_dropMenu").slideUp();
		}
	);
});
/*鼠标移上触发下拉菜单 sljJS_dropDownMenuHover*/
$(function(){
	$(".sljJS_dropDownMenuHover").hover(
		function(){
			$(this).find(".JS_dropMenu").slideDown();
		},
		function(){
			$(this).find(".JS_dropMenu").slideUp();
		}
	);
});



/**
*JS组件名称：图片交换
*
*使用说明：
*1.给要交换的图片加上class为sljJS_imgChange,
*2.写上图片交换源imgChangeSrc="交换的图片地址"
*代码演试：
	<img src="aa.jpg" class="sljJS_imgChange" imgChangeSrc="bb.jpg"/>
*/

$(function(){
	var imgChangeSrc;
	var src;
	$(".sljJS_imgChange").hover(
		function(){
			imgChangeSrc = $(this).attr("imgChangeSrc");
			src = $(this).attr("src");
			$(this).attr("src",imgChangeSrc);
		},
		function(){
			$(this).attr("src",src);
		}
	)
})


/**
*组件名称：类切换开关 toggleClass
*
*使用说明：
*1.在需要html标签上增加一个class名为sljJS_toggleClass
*2.要增加的class是自定义的：toggleClass="hover"
*html代码演试：
	<p class="sljJS_toggleClass" toggleClass="thisclass">演试</p>
	<p class="sljJS_toggleClass" toggleClass="open">演试</p>
	...
**/
$(function(){
	$(".sljJS_toggleClass").hover(
		function(){
			$toggleClass=$(this).attr("toggleClass");
			$(this).addClass($toggleClass);
		},
		function(){
			$(this).removeClass($toggleClass);
		}
	);
});


/**
*组件名称：多页签（点击或鼠标移上）切换
*使用多页签的标记（父）：sljJS_tabsClick 或 sljJS_tabsHover
*多页签的点击按钮（子）：JS_tabsToggle 
*多页签的内容按钮（子）：JS_tabsContent
*关联参数：JS_tabsToggleNo
*点击后的当前样式：thisclass
*一个页面可写多次使用，不会相互污染
*html代码结构演试：
    <div class="sljJS_tabsClick">
	<!--<div class="sljJS_tabsHover">-->
        <div>
            <ul>
                <li class="thisclass JS_tabsToggle" JS_tabsToggleNo="1"><a href="#overview">TitleNo1</a></li>
                <li class="JS_tabsToggle" JS_tabsToggleNo="2"><a href="#overview">TitleNo2</a></li>
                <li class="JS_tabsToggle" JS_tabsToggleNo="3"><a href="#overview">TitleNo3</a></li>
            </ul>
        </div>
       <div class="b_tabsContent">
            <div class="JS_tabsContent JS_tabsContent_1">
                JS_tabsContent_1
            </div>
            <div class="hide JS_tabsContent JS_tabsContent_2">
            	JS_tabsContent_2
            </div>
            <div class="hide JS_tabsContent JS_tabsContent_3">
            	JS_tabsContent_3
            </div>
       </div>
    </div>
**/

//点击多页签切换
$(function(){
	var action = ".sljJS_tabsClick";
	$(action+" .JS_tabsToggle").click(function(){
		//alert(action);
		//识别对应的tabs的编号
		var v = $(this).attr("JS_tabsToggleNo");
		//移除多页签标题的所有当前样式
		$(this).closest(action).find(".JS_tabsToggle").removeClass("thisclass");
		//当前对象增加当前样式
		$(this).addClass("thisclass");
		//找到所有的内容显示tab:JS_tabsContent，然后隐藏
		$(this).closest(action).find(".JS_tabsContent").hide();
		//组成新的编号如：JS_tabsContent_1,JS_tabsContent_2...，找到该class,然后显示
		$(this).closest(action).find(".JS_tabsContent_"+v).slideDown();
	});
})

//鼠标移上多页签切换
$(function(){
	var action = ".sljJS_tabsHover";
	$(action+" .JS_tabsToggle").hover(
		function(){
			//alert(action);
			//识别对应的tabs的编号
			var v = $(this).attr("JS_tabsToggleNo");
			//移除多页签标题的所有当前样式
			$(this).closest(action).find(".JS_tabsToggle").removeClass("thisclass");
			//当前对象增加当前样式
			$(this).addClass("thisclass");
			//找到所有的内容显示tab:JS_tabsContent，然后隐藏
			$(this).closest(action).find(".JS_tabsContent").hide();
			//组成新的编号如：JS_tabsContent_1,JS_tabsContent_2...，找到该class,然后显示
			$(this).closest(action).find(".JS_tabsContent_"+v).slideDown();
		},
		function(){
		}
	);
})



